<!--
  cesium初始化组件
 * @Description: 
 * @Author: your name
 * @version: 
 * @Date: 2024-05-08 16:34:13
 * @LastEditors: your name
 * @LastEditTime: 2024-09-10 09:25:51
-->
<template>
    <div id="cesium-viewer">
        <slot />
    </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted,markRaw } from "vue";
import app from '../main'
import {
    initViewer,
    setScene,
    loadTilesets,
    handleDefaultModelEffect,
    flyToDefaultView,
    addSkyOnGround,
} from "@/cesiumTools/sceneManager";
import { useLineData } from '@/store'
import {getLine} from '@/api/line.js'


const lineDataStore = useLineData()

//初始化cesium实例
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYTgzYWYzNS00Zjk0LTQ1MTYtYmUwMi0yZWQwNDdiZDE5ODAiLCJpZCI6MzA4NjQ3LCJpYXQiOjE3NDg5MjA2Mzl9.W14LDt4yTKkBBxFta2-hDGUlaIj4kWPAj0bUdkFJnI8';

onMounted(async () => {
    const viewer = initViewer("cesium-viewer");//初始化viewer

    setScene(viewer);//后处理效果
    
    const modelUrls = [{
      url:"http://localhost:666/model/wuhan/tileset.json",
      options:{}
    }]
    lineDataStore.setViewer(markRaw(viewer))//存入viewer
    // 加载线路数据
    const lineData = await getLine()//8条地铁全部信息
    console.log(lineData)
    lineDataStore.setData(markRaw(lineData))//存入lineData
    // 加载多个3dtiles
    // await loadTilesets(viewer,modelUrls,(tilesets)=>{
    //   handleDefaultModelEffect(tilesets[0])//3dtile着色器特效
    //   lineDataStore.setTileset(markRaw(tilesets[0]))//存入3Dtile
    // })
    flyToDefaultView(viewer)//相机飞行
    //setTimeout(()=>{addSkyOnGround(viewer)},2100)//天空盒

    
});
</script>
<style>
#cesium-viewer {
    width: 100%;
    height: 100%;
    pointer-events: all;
}
</style>